<template>
  <div>
    <div class="home">
        <div class="homePage" >
          <font color="white" >火车管理系统</font>
        </div>
          <div class="homePage1" @click="home1">
            <font color="white">首页</font>
          </div>
        <div class="homePage1"  @click="home2">
          <font color="white" >车次信息</font>
        </div>
        <div class="homePage1" @click="home3">
          <font color="white" >后台系统</font>
        </div>
    </div>
    <div  >
      <img src="../../../assets/xiang/项目1.jpg" style="height: 700px;width: 100%">
    </div>
    <div v-if="this.var==1">
      <div class="new">
          HOME NEWS
      </div>
      <div class="new">
        火车资讯
      </div>
      <div >
<!--        <div class="zi">-->
<!--          <img :src=this.im>-->
<!--        </div>-->
        <div class="image-content">
          <div class="meeting_single" v-for="(val, key) in list1" :key="key">
              <img :src="val.picture" :alt="val.title" style="width: 100%;height: 100%" />
  <!--          <div class="meeting_content">{{val.title}}</div>-->
        </div>
        </div>
      </div>
    </div>
    <div v-if="this.var==2">
      <div class="new">
        车辆信息
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
        <el-form-item ref="form" :model="queryParams" label-width="80px">
          <el-form-item label="发车日期">
            <el-input type="date" v-model="queryParams.departureDate" style="width: 300px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item ref="form" :model="queryParams" label-width="80px">
          <el-form-item label="起始站">
            <el-input  v-model="queryParams.startingStation" style="width: 300px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item ref="form" :model="queryParams" label-width="80px">
          <el-form-item label="终点站">
            <el-input  v-model="queryParams.terminus" style="width: 300px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="image-content">
        <div class="meeting_single"
             v-for="(val, key) in informationList" :key="key"  @click="go_articel(val.tid)">
            <img :src="val.picture" :alt="val.title"  style="width: 100%;height: 100%"/>
        </div>
      </div>
      </div>

  </div>
</template>

<script>
  import { listInformation} from "@/api/system/information";
  import {listNews} from "@/api/system/news";
  export default {
    name: 'index',
    data() {
      return{
        form:{},
        var:1,
        im:"http://localhost:8080/profile/upload/2021/11/20/251a4529-b69f-4cc5-a67e-1a9ba6dca46e.png",
        picture:[],
        title:[],
        //车辆资讯集合
        list1:[],
        //车辆信息集合
        informationList:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pid: null,
          trainNumberName: null,
          licensePlateNumber: null,
          picture: null,
          departureDate: null,
          startingStation: null,
          terminus: null,
          departureTime: null,
          arrivalTime: null,
          seatType: null,
          totalDuration: null,
          remarks: null,
          remarks1: null,
          title: null,
          time: null,
          place: null,
          content: null
        },
      }
    },
    created(){
      this.getList();
      this.listNews1();
    },
    methods: {
      //首页
      home1(){
        this.var=1;
      },
      //车辆信息
      home2(){
        this.var=2;
      },
      //后台管理
      home3(){
        this.$router.push({path:"/index"});
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      resetQuery() {

      },
      getList() {
        this.loading = true;
       // console.log(this.queryParams,"6666");
        listInformation(this.queryParams).then(response => {
          this.informationList = response.rows;
          console.log("res",response)
          this.total = response.total;
          this.loading = false;
        });
      },
      listNews1(){
        listNews(this.queryParams).then(res=>{
          console.log(res);
          this.list1=res.rows;
          for (let i = 0; i <res.rows.length ; i++) {
            this.picture.push(res.rows[i].picture);
          }

        })
      },
      //车辆跳转页
      go_articel (tid) {
        this.$router.push({
          path: "/home/VehicleDetails/index",
          query: {
            tid
          }
        });
      },
    }
  }

</script>

<style scoped>
  .home{
    background-color: black;
    height: 100px;
    width: 100%;
    display:flex;
  }
  .homePage{
    margin-top: 30px;
    margin-left:350px;
    font-size:50px;
    font-style: italic;
  }
  .homePage1{
    margin-top: 50px;
    margin-left:100px;
    font-size:30px;

  }
  .new{
    color:#20B2AA;
    font-size:40px;
    text-align:center
  }
  .zi{
    margin-top: 150px;
    margin-left:300px;
    background-color: red;
    height: 200px;
    width: 300px;
  }
  .fa{

  }
  .image-content{

    display: flex;
    align-content: space-around;
    justify-content: space-around;



  }
  .meeting_single {
    border: 1px solid red;
    /*display: inline-block;*/
    width: 150px;
    height: 150px;
    /*margin-left: 300px;*/
    /*cursor: pointer;*/
    /*width: 15%;*/
    /*transition: all 0.3s;*/
    /*height: 180px;*/
    /*background: rgba(255, 255, 255, 1);*/
    /*box-shadow: 0px 0px 16px 0px rgba(15, 30, 42, 0.08);*/
    /*border-radius: 2px;*/
    /*display:flex;*/
    /*flex-wrap: wrap ;*/
  }
  . meeting_img {
    width: 100%;
    /*width: 136px;*/
    /*height: 136px;*/
    /*display:flex;*/
  }

</style>
